<template>
  <div class="loading" v-if="show">
    <div class="wrapper flex-jac">
      <div class="circle">
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{ show: boolean }>()
</script>

<style lang="scss" scoped>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #00000041;
  z-index: 999;

  .wrapper {
    height: 100%;
  }

  .circle {
    position: relative;
    width: 60px;
    height: 60px;
    -webkit-mask: radial-gradient(circle at center center, #0000 10px, #000 0);
    background: linear-gradient(0deg, #766DF480 50%, #766DF4FF 0) center/4px 100%,
      linear-gradient(90deg, #766DF440 50%, #766DF4BF 0) center/100% 4px;
    background-repeat: no-repeat;
    animation: rotateA 2s steps(12) 0s infinite normal forwards;

    &::before,
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, #766DF480 50%, #766DF4FF 0) center/4px 100%,
        linear-gradient(90deg, #766DF440 50%, #766DF4BF 0) center/100% 4px;
      background-repeat: no-repeat;
      transform: rotate(60deg);

    }

    &::after {
      transform: rotate(120deg);

    }
  }
}

@keyframes rotateA {
  to {
    transform: rotate(1turn);
  }
}
</style>